{extend name="./public/base" /}
{block name="title"}上传资料{/block}
{block name="style"}
<style type="text/css">
	.content{
		text-align: center;
		margin: auto;
		background-color:#fff;
		font-size: 12px;
		color: #6e5858;
		overflow: hidden;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 35px;
	    color: #fff;
	    text-align: center;
	    line-height: 35px;
	    font-size: 14px;
	    margin-bottom: 10px;
	}
	.back{
		float: left;
	    margin-top: 8px;
	}
	.back img{
		width: 20px;
	}
	.weui-uploader__input-box{
		width: 45%;
	    height: 300px;
	    margin-top: 30px;
	    margin-left: 22px;
	}
	
	.line{
		height: 2px;
	    background-color: #edecec;
	    margin: 20px auto;
	    width: 90%;
	}
	.line1{
		height: 2px;
	    background-color: #fff;
	    margin: 20px auto;
	    width: 90%;
	}
	.info{
		width: 90%;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	}
	.info{
		width: 90%;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	}
	.info_list{
		width: 90%;
		color: #8c90a6;
    	font-size: 12px;
	}
	.info_list .item{ 
		
	}

	.info_list .item span{
	 	display: inline-block;
	}
	.info_list .item .lable{
	 width: 40%;
	}
	.info_list .item .value{
	 width: 50%;
	}
   	
   	.info .tags_line1 .my_tag{
   		width: 33%;
   		text-align: center;
   		padding-left: 0;
   		padding-bottom:20px;
   	}


   	.picture{
   		height: 200px;
   		width: 100%;
   	}
   	.weui-uploader__input-box{
		width: 40%;
    	height: 120px;
	    border: 1px solid #ffba58;
	    border-radius: 10px;
	    overflow: hidden;
	    position: relative;
	    left: 30%;
	}
	.weui-uploader__input-box1{
		width: 40%;
    	height: 120px;
    	margin: auto;
    	border: 1px solid #ffba58;
    	border-radius: 10px;
    	overflow: hidden;
	}
	.id_img1{
		background-image: none;
	}
   	.button{
		height:40px;
		background-color: #ffba58;
		color:#fff;
		text-align: center;
		line-height: 40px;
		width:90%;
		margin:20px auto;
		border-radius: 40px;
   	}
   	.id_z{
   		display: inline-block;
   		width: 50%;
   	}
   	.id_f{
   		display: inline-block;
   		width: 50%;
   	}
   	.des{
   		clear: both;
   		text-align: center;
   		color:#bcc1c1;
   	}
   	/*预览*/
   	.weui-gallery__opr {
	    position: absolute;
	    right: 0;
	    bottom: 57px;
	    left: 0;
	    background-color: #0d0d0d;
	    color: #fff;
	    line-height: 60px;
	    text-align: center;
	}
	.weui-icon-delete.weui-icon_gallery-delete {
	    color: #fff;
    	font-size: 24px;
	}
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
			<span>上传资料</span>
		</div>
		<div class="info">
		    <div class="line1"></div>
			<div class="info_list">
				<div class="my_info show">
					<div class="item">
					<span class="lable">昵称:</span><span class="value"><input class="weui-input" type="text" v-model='user_name' id="user_name"></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">微信号:</span><span class="value"><input class="weui-input" type="text" v-model="wechat" id="wechat"></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">电话:</span><span class="value"><input class="weui-input" type="text" v-model="mobile" id="mobile"></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">性别:</span><span class="value"><input class="weui-input" type="text" v-model="gender_name" id="gender"></span>
					</div>
					<div class="line"></div>
					<div class="picture">
			          	<div class="id_img1" v-bind:class="avatar? '':'weui-uploader__input-box'">
	                        <input v-if='!avatar' id="uploaderInput1" class="weui-uploader__input" type="file"  accept="image/jpg,image/jpeg,image/png,image/gif"  multiple="">
	                        <div v-if="avatar" class="weui-uploader__input-box1" id="#ImgID#" :style="{backgroundImage: 'url('+avatar+')'}" style="background-size:100% 100%;background-repeat:no-repeat;"></div>
	                    </div>
	                    <div class="des"><span class="id_z">(用户头像)</span></div>
					</div>
					<div class="weui-gallery" id="gallery">
				        <span class="weui-gallery__img" id="galleryImg"></span>
				        <div class="weui-gallery__opr">
				            <a href="javascript:" class="weui-gallery__del">
				                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
				            </a>
				        </div>
				    </div>
				</div>

			</div>
		</div>

		<div class="button" @click="authen">保存资料</div>
	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    members: [],
			    text:'上传资料',
			    user_name:'',
			    wechat:'',
			    avatar:'',
			    avatar1:'',
			    mobile:'',
			    gender:'',
			    gender_name:'',
			},
		    methods:{
		        getMemberList:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'member/user_info',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {page: 1},
		        		success:function(data){
		        			console.log(data.code);
		        			if(data.code == 1){
		        				t.members = data.data;
		        				t.user_name = data.data.member_data.user_name;
		        				t.wechat = data.data.member_data.wechat;
		        				t.avatar = data.data.member_data.avatar;
		        				t.mobile = data.data.member_data.mobile;
		        				t.gender_name = data.data.member_data.gender;
		        				console.log(123);
		        				console.log(t.members);
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        authen:function(){
		        	var that = this;
		        	var user_name = that.user_name;
		        	var wechat = that.wechat;
		        	var mobile = that.mobile;
		        	var avatar = that.avatar;
		        	var gender = that.gender_name;
		        	if(!$.trim(user_name)){
		        		$.toast('请输入正确的昵称','text');
		        		return;
		        	}
		        	if(!$.trim(wechat)){
		        		$.toast('请输入正确的微信号','text');
		        		return;
		        	}
		        	if(avatar == ""){
		        		$.toast('请输上传用户头像','text');
		        		return;
		        	}
		        	var pattern = /^1[34578]\d{9}$/; 
		        	if(!pattern.test(mobile)){
		        		$.toast('请输入正确的电话','text');
		        		return;
		        	}
		        	$.ajax({
		        		url: host+'member/up',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {'user_name':user_name,'wechat':wechat,'avatar':avatar,'gender':gender,'mobile':mobile},
		        		success:function(data){
		        			$.toast(data.msg,"text");
		        			if(data.code == 1){
		        				setTimeout(function(){
                                that.getMemberList();
                              	}, 3000);
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        	console.log(user_name);
		        	console.log(wechat);
		        	console.log(avatar);
		        }
		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.getMemberList();
	        }

		})
		console.log(vm);

		$("#gender").select({
		  	title: "请选择搜索性别",
		 	items: [{'title':'男','value':0},{'title':'女','value':1}] ,
		 	onChange: function(result){
		    	vm.gender = result.values;
			},
		});
		
        $(".id_img1").on("change", function (e) {
        	var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
	        var maxSize = 1024 * 1024*10; // 10240KB，也就是 10MB
	        var maxWidth = 1900;  // 图片最大宽度
	        var maxCount = 5;// 最大上传图片数量
	        var tmpl = '<div class="weui-uploader__input-box1" id="#ImgID#" style="background-image:url(#url#);background-size:100% 100%;background-repeat:no-repeat;"><div class="weui_uploader_status_content">0%</div></div>',
	        $gallery = $("#gallery"),
	        $galleryImg = $("#galleryImg"),
	        $uploaderInput = $("#uploaderInput1"),
	        $uploaderFiles = $(".id_img1");
            files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                var imgID = genGUID();
                var reader = new FileReader();
                var fileType = file.type;
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    
                    $.toast('该类型不允许上传' + fileType, "forbidden");
                    continue;
                }
                if (file.size > maxSize) {
                    $.toast("图片太大，不允许上传", "forbidden");
                    continue;
                }
                if ($('.weui-uploader__input-box1').length >= maxCount) {
                    $.toast('最多只能上传' + maxCount + '张图片', "forbidden");
                    return;
                }
                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60%
                        // 插入到预览区
                        $uploaderFiles.removeClass('weui-uploader__input-box');
                        $uploaderFiles.html($(tmpl.replace('#url#', base64).replace('#ImgID#',imgID)));
                        var num = $('.weui-uploader__input-box1').length;
                        $('#uploadCount').text(num);
                        // 模拟上传进度
                        var progress = 0;
                        function uploading() {
                            $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
                            if (progress < 100) {
                                setTimeout(uploading, 30);
                            } else {
                                $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
                            }
                        }
                        setTimeout(uploading, 30);
                    };
                    img.src = e.target.result;
                    //这里实现上传
  　　　　　　　　　　      $.ajax({
					  	url: "{:url('api/Upload/processImg')}",
					  	type: 'post',
					  	dataType: 'json',
					  	data: {'file':img.src},
					  	success:function(e){
					  		console.log(e);
					  		vm.avatar = e;
					  		// console.log('图片');
					  		// $("#"+imgID).remove();
					  		console.log(vm.avatar);
					  		// console.log("#"+imgID);
					  	},
					  	error:function(e){
					  		console.log(123321);
					  	}
					})
  

            };
            reader.readAsDataURL(file);

            }
        })
        var index1; //第几张图片
        $(".id_img1").on("click", "div", function () {
            index1 = $(this).index();
            $("#galleryImg").attr("style", this.getAttribute("style"));
            $("#galleryImg").css("background-size",'');
            $("#gallery").fadeIn(100);
        });
        $("#gallery").on("click", function () {
            $("#gallery").fadeOut(100);
        });

        //删除图片
        $(".weui-gallery__del").click(function () {
            $(".id_img1").find("div").eq(index1).remove();
            var str1 = '<input id="uploaderInput1" class="weui-uploader__input" type="file"  accept="image/jpg,image/jpeg,image/png,image/gif"  multiple="">';
            vm.avatar = '';
            $(".id_img1").addClass('weui-uploader__input-box');
            $(".id_img1").append(str1);
        });



   		
   		$(".id_img2").on("change", function (e) {
        	var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
	        var maxSize = 1024 * 1024*10; // 10240KB，也就是 10MB
	        var maxWidth = 1900;  // 图片最大宽度
	        var maxCount = 5;// 最大上传图片数量
	        var tmpl = '<div class="weui-uploader__input-box1" id="#ImgID#" style="background-image:url(#url#);background-size:100% 100%;background-repeat:no-repeat;"><div class="weui_uploader_status_content">0%</div></div>',
	        $gallery = $("#gallery1"),
	        $galleryImg = $("#galleryImg1"),
	        $uploaderInput = $("#uploaderInput11"),
	        $uploaderFiles = $(".id_img2");
            files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                var imgID = genGUID();
                var reader = new FileReader();
                var fileType = file.type;
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    
                    $.toast('该类型不允许上传' + fileType, "forbidden");
                    continue;
                }
                if (file.size > maxSize) {
                    $.toast("图片太大，不允许上传", "forbidden");
                    continue;
                }
                if ($('.weui-uploader__input-box1').length >= maxCount) {
                    $.toast('最多只能上传' + maxCount + '张图片', "forbidden");
                    return;
                }
                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60%
                        // 插入到预览区
                        $uploaderFiles.removeClass('weui-uploader__input-box');
                        $uploaderFiles.html($(tmpl.replace('#url#', base64).replace('#ImgID#',imgID)));
                        var num = $('.weui-uploader__input-box1').length;
                        $('#uploadCount').text(num);
                        // 模拟上传进度
                        var progress = 0;
                        function uploading() {
                            $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
                            if (progress < 100) {
                                setTimeout(uploading, 30);
                            } else {
                                $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
                            }
                        }
                        setTimeout(uploading, 30);
                    };
                    img.src = e.target.result;
                    //这里实现上传
  　　　　　　　　　　      $.ajax({
					  	url: "{:url('api/Upload/processImg')}",
					  	type: 'post',
					  	dataType: 'json',
					  	data: {'file':img.src},
					  	success:function(e){
					  		console.log(e);
					  		vm.avatar1 = e;
					  		console.log('图片');
					  		//$("#"+imgID).remove();
					  	},
					  	error:function(e){
					  		console.log(123321);
					  	}
					})
  

            };
            reader.readAsDataURL(file);

            }
        })
        $("#btnsaveCharge").click(function () {
            

            //或者在这里实现批量上传, 不建议批量上传
        });

	  //生成guid
	    function genGUID() {
	        var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
	        var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
	        return (G1 + G2);
	    }
		
	});
</script>
{/block}